<template>
  <div class="searchA">
    <ul>
      <li v-for="(v, i) in single" :key="i">
        <div
          class="searchA_a iconfont icon-bofang"
          @click="getmusicId(v.id)"
        ></div>
        <div class="searchA_b">
          <router-link :to="`/songinfo/${v.id}`">
            <span>{{ v.name }}</span></router-link
          >
        </div>
        <div class="searchA_c">
          <span v-for="(q, w) in v.ar" :key="w"><span v-if="w > 0">/</span><router-link :to="`/singerInfo/${q.id}`">{{ q.name }}</router-link></span>
        </div>
        <div class="searchA_d">
          <router-link :to="`/albuminfo/${v.al.id}`"><span>《{{ v.al.name }}》</span></router-link>
        </div>
        <div class="searchA_e">
          <span>{{ changetime(v.dt) }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      // 搜索的值
      keyword: "",
      //   搜索类型
      type: "",
      //   单曲的数据
      single: {},
      // 数据的总数
      singlenum: 0,
    };
  },
  created() {
    //获取搜索的值
    this.keyword = this.$route.params.value;
    // 获取搜索类型
    this.type = this.$router.history.current.name;
    this.getData();
  },
  methods: {
    ...mapMutations(["getmusicId"]),
    //   获取单曲数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/cloudsearch?keywords=${this.keyword}&type=${this.type}`
        )
        .then((res) => {
          this.single = res.data.result.songs;
        });
    },
    changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
  },
};
</script>
<style scoped>

.searchA ul li {
  display: flex;
  font-size: 12px;
  padding: 10px 10px 10px 18px;
  border: 1px solid transparent;
  
}
.searchA ul li:hover {
  background-color: #f2f2f2 !important;
  border: 1px solid #e1e1e1;
}
.searchA ul li:nth-child(even) {
  background-color: #f7f7f7;
}
.searchA ul li div {
  display: flex;
  align-items: center;
  
}
.searchA ul li div a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchA .searchA_a {
  flex: 1;
  justify-content: center;
  color: #b3b3b3;
  font-size: 20px;
  cursor: pointer;
}
.searchA .searchA_a:hover {
  color: #666;
}
.searchA .searchA_b {
  flex: 20;
  margin-right: 20px;
}
.searchA .searchA_b span:hover {
  text-decoration: underline;
}
.searchA .searchA_c {
  flex: 6;
  overflow: hidden;
  margin-right: 20px;
}
.searchA .searchA_c span:hover {
  text-decoration: underline;
}
.searchA .searchA_d {
  flex: 6;
  margin-right: 20px;
  overflow: hidden;
  color: #666666;
}
.searchA .searchA_d a{
  color: #666666;
}
.searchA .searchA_d span:hover {
  text-decoration: underline;
}
.searchA .searchA_e {
  flex: 2;
}
</style>